<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #canvas {
            /* background-color: #eee; */
            border: 1px solid #aaa
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>
</body>
<script src="./js/scene.js"></script>
<script src="./js/sprite.js"></script>
<script src="./js/player.js"></script>
<script>
    let ctx = canvas.getContext('2d')
    let innerHeight = 400, innerWidth = 600

    let scene = new Scene({
        innerHeight,
        innerWidth,
    })
    let p = new Player({ scene, })
    p.posX = 300
    p.posY = 200
    
    let s = new Sprite({
        scene: scene,
        posX: 300,
        posY: 200,
        color: 'red'
    })
    scene.actors.push(s)

    scene.player = p
    scene.init()
    
</script>
</html>